@import "~@/assets/scss/color";

html,
body {
  height: 100%;
}

body {
  background: $--background-major;
  font-family: PingFangSC-Regular, Microsoft YaHei, Helvetica, STHeiTi, Arial, sans-serif;
  font-size: 14px;
  margin: 0;
  min-width: 1200px;
}

input, textarea {
  font-family: inherit;
}

/* Color */
.c-text-major {
  color: $--text-major !important;
}

.c-text-minor {
  color: $--text-minor !important;
}

.c-text-high {
  color: $--text-high !important;
}

.c-hint-major {
  color: $--hint-major !important;
}

.c-hint-warn {
  color: $--hint-warn !important;
}

.c-hint-error {
  color: $--hint-error !important;
}

.c-hint-succ {
  color: $--hint-succ !important;
}

.c-background-high {
  color: $--background-high !important;
}

// Border
.u-b-major {
  border: 1px solid $--border-major;
}

.u-bt-major {
  border-top: 1px solid $--border-major;
}

.u-bb-major {
  border-bottom: 1px solid $--border-major;
}

/* Margin */
.u-m10 {
  margin: 10px !important;
}

.u-m20 {
  margin: 20px !important;
}

.u-m30 {
  margin: 30px !important;
}

/* Margin Top */
.u-mt3 {
  margin-top: 3px !important;
}
.u-mt10 {
  margin-top: 10px !important;
}

.u-mt20 {
  margin-top: 20px !important;
}

.u-mt30 {
  margin-top: 30px !important;
}

/* Margin Right */
.u-mr5 {
  margin-right: 5px !important;
}

.u-mr10 {
  margin-right: 10px !important;
}

.u-mr20 {
  margin-right: 20px !important;
}

.u-mr30 {
  margin-right: 30px !important;
}

/* Margin Bottom */
.u-mb0 {
  margin-bottom: 0px !important;
}

.u-mb10 {
  margin-bottom: 10px !important;
}

.u-mb20 {
  margin-bottom: 20px !important;
}

.u-mb30 {
  margin-bottom: 30px !important;
}

.u-mb40 {
  margin-bottom: 40px !important;
}

/* Margin Left */
.u-ml5 {
  margin-left: 5px !important;
}

.u-ml10 {
  margin-left: 10px !important;
}

.u-ml20 {
  margin-left: 20px !important;
}

.u-ml30 {
  margin-left: 30px !important;
}

/* Padding */
.u-p10 {
  padding: 10px !important;
}

.u-p20 {
  padding: 20px !important;
}

.u-p30 {
  padding: 30px !important;
}

.u-pb0 {
  padding-bottom: 0 !important;
}

/* Padding Top*/
.u-pt10 {
  padding-top: 10px !important;
}

.u-pt20 {
  padding-top: 20px !important;
}

.u-pt30 {
  padding-top: 30px !important;
}

/* Padding Right */
.u-pr10 {
  padding-right: 10px !important;
}

.u-pr20 {
  padding-right: 20px !important;
}

.u-pr30 {
  padding-right: 30px !important;
}

/* Padding Bottom */
.u-pb10 {
  padding-bottom: 10px !important;
}

.u-pb20 {
  padding-bottom: 20px !important;
}

.u-pb30 {
  padding-bottom: 30px !important;
}

.u-pb40 {
  padding-bottom: 40px !important;
}

/* Padding Left */
.u-pl10 {
  padding-left: 10px !important;
}

.u-pl20 {
  padding-left: 20px !important;
}

.u-pl30 {
  padding-left: 30px !important;
}

// padding-left padding-right
.u-plr10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Text Align */
.u-tc {
  text-align: center;
}

.u-tr {
  text-align: right;
}

.u-tl {
  text-align: left;
}

/* Font Size */
.u-fs13 {
  font-size: 13px !important;
}

.u-fs14 {
  font-size: 14px !important;
}

.u-fs16 {
  font-size: 16px !important;
}

.u-fs36 {
  font-size: 36px !important;
}

/* Line Height */
.u-lh24 {
  line-height: 24px;
}

.u-lh32 {
  line-height: 32px;
}

.u-lh40 {
  line-height: 40px;
}

/* min-width */
.u-mw120 {
  min-width: 120px !important;
}

/* Width */
.u-w80 {
  width: 80px !important;
}

.u-w100 {
  width: 100px !important;
}

.u-w120 {
  width: 120px !important;
}

.u-w145 {
  width: 145px !important;
}

.u-w150 {
  width: 150px !important;
}

.u-w194 {
  width: 194px !important;
}

.u-w200 {
  width: 200px !important;
}

.u-w210 {
  width: 210px !important;
}

.u-w220 {
  width: 220px !important;
}

.u-w250 {
  width: 250px !important;
}

.u-w300 {
  width: 300px !important;
}

.u-w320 {
  width: 320px !important;
}

.u-w350 {
  width: 350px !important;
}

.u-w400 {
  width: 400px !important;
}

.u-w440 {
  width: 440px !important;
}

.u-w450 {
  width: 450px !important;
}

.u-w600 {
  width: 600px !important;
}

/* Width Per */
.u-wb33 {
  width: 33.33% !important;
}

.u-wb50 {
  width: 50% !important;
}

.u-wb100 {
  width: 100% !important;
}

/* height */
.u-h32 {
  height: 32px !important;
}

/* Float */
.u-fl {
  float: left;
}

.u-fr {
  float: right;
}

/* text-align */
.u-tl {
  text-align: left;
}

// util
.u-clearfix {
  &::after {
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }
}

.u-link {
  color: $--text-high;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.u-cursor {
  cursor: pointer;
}

.u-prewrap {
  white-space: pre-wrap;
}

.u-bold {
  font-weight: 700;
}

.u-table-handle {
  font-size: 16px;
  padding: 0 5px;
  cursor: pointer;
  color: $--hint-major;
  &:hover {
    color: $--text-high;
  }
}

.u-page-handle {
  padding: 13px 20px;
  background: $--background-high;
  border-top: 2px $--background-major solid;
  text-align: right;
  .m-button + .m-button {
    margin-left: 10px;
  }
}

.u-affix-bottom {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  left: 20px;
  right: 20px;
}

.u-dib {
  display: inline-block;
}

.u-status--progress {
  color: #7dd62d;
  font-weight: 700;
}

.u-vat {
  vertical-align: top;
}

.u-table--total {
  color: $--text-major !important;
  user-select: auto !important;
}